<template>
 <div>
  御剑乘风来,除魔天地间!===编程式导航app
 
 <ul>
  <li @click='handel1'>跳转第1个页面</li>
  <li @click='handel2'>跳转第2个页面</li>
  <li  @click='handel3'>跳转第3个页面</li>
  <li  @click='handel4'>跳转第1个儿子页面</li>
  <li  @click='handel5'>跳转第2个儿子页面</li>
 </ul>
 <hr>
  <router-view></router-view>
 </div>


</template>
<script>
export default{
    name:'',
    data () {
        return {
            
        }
    },
    created () {
      
    },
    watch:{
      '$route.path'(newVal){
        if(newVal=='/son'){
          alert('这是我的第一个儿子')
        }

      }

    },
    computed:{
    },
    methods:{
      handel1(){
        console.log('111')
        this.$router.push('/one')
      },
      handel2(){
        this.$router.push({name:'Two',params:{age:18,num:'20'}})
      },
      handel3(){
         this.$router.push('./three/333?name=郑潇&age=14')
      },
      handel4(){
         this.$router.push('./son').catch(err=>{})
      },
      handel5(){
        if(this.$route.fullPath=='/son1') return
         this.$router.push('/son1')
      }
    }
}
</script>
<style lang='less'  scoped>
li{cursor: pointer;}
    
</style>
